<template>
  <div class="bg-white rounded-xl shadow-sm overflow-hidden backdrop-blur-sm bg-white/90">
    <!-- Tab导航 -->
    <div class="border-b border-gray-200">
      <nav class="-mb-px flex space-x-6 px-6" aria-label="Tabs">
        <button 
          v-for="tab in tabs" 
          :key="tab.id" 
          @click="activeTab = tab.id"
          :class="[
            activeTab === tab.id
              ? 'border-indigo-500 text-indigo-600'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
            'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm'
          ]"
        >
          {{ tab.name }}
        </button>
      </nav>
    </div>
    
    <!-- Tab内容 -->
    <div class="p-6">
      <!-- 推荐图片 -->
      <div v-if="activeTab === 'recommendations'" class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4">
        <div v-for="image in recommendationImages" :key="image.id" class="group relative aspect-square rounded-lg overflow-hidden">
          <img :src="image.url" :alt="image.alt" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" />
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-3">
            <div class="text-white text-xs font-medium truncate w-full">{{ image.alt }}</div>
          </div>
        </div>
      </div>
      
      <!-- 点赞图片 -->
      <div v-if="activeTab === 'likes'" class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4">
        <div v-for="image in likedImages" :key="image.id" class="group relative aspect-square rounded-lg overflow-hidden">
          <img :src="image.url" :alt="image.alt" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" />
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-3">
            <div class="text-white text-xs font-medium truncate w-full">{{ image.alt }}</div>
          </div>
        </div>
      </div>
      
      <!-- 收藏图片 -->
      <div v-if="activeTab === 'collections'" class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4">
        <div v-for="image in collectedImages" :key="image.id" class="group relative aspect-square rounded-lg overflow-hidden">
          <img :src="image.url" :alt="image.alt" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" />
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-3">
            <div class="text-white text-xs font-medium truncate w-full">{{ image.alt }}</div>
          </div>
        </div>
      </div>
      
      <!-- 空状态 -->
      <div v-if="getActiveTabImages.length === 0" class="py-12 flex flex-col items-center justify-center text-gray-500">
        <svg class="w-16 h-16 mb-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
        <p class="text-center">暂无{{ getActiveTabName }}图片</p>
        <button v-if="activeTab === 'recommendations'" class="mt-4 px-4 py-2 bg-indigo-50 text-indigo-600 rounded-lg text-sm font-medium hover:bg-indigo-100 transition-colors">
          浏览推荐
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { UserVo } from '@/api/user-service';

// 定义组件接收的属性
defineProps({
  user: {
    type: Object as () => UserVo,
    required: true
  }
});

// Tab定义
const tabs = [
  { id: 'recommendations', name: '推荐图片' },
  { id: 'likes', name: '点赞图片' },
  { id: 'collections', name: '收藏图片' }
];

// 当前激活的Tab
const activeTab = ref('recommendations');

// 图片数据
interface ImageItem {
  id: string;
  url: string;
  alt: string;
}

// 写死的图片数据 - 推荐图片
const recommendationImages = ref<ImageItem[]>([
  {
    id: 'rec-1',
    url: 'https://images.pexels.com/photos/2662116/pexels-photo-2662116.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '山脉与湖泊风景'
  },
  {
    id: 'rec-2',
    url: 'https://images.pexels.com/photos/2559941/pexels-photo-2559941.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '森林与雾气'
  },
  {
    id: 'rec-3',
    url: 'https://images.pexels.com/photos/1287145/pexels-photo-1287145.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '日落山景'
  },
  {
    id: 'rec-4',
    url: 'https://images.pexels.com/photos/1770809/pexels-photo-1770809.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '森林小路'
  },
  {
    id: 'rec-5',
    url: 'https://images.pexels.com/photos/1166209/pexels-photo-1166209.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '田野与云彩'
  },
  {
    id: 'rec-6',
    url: 'https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '雪山全景'
  },
  {
    id: 'rec-7',
    url: 'https://images.pexels.com/photos/1671324/pexels-photo-1671324.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '阳光穿过树林'
  },
  {
    id: 'rec-8',
    url: 'https://images.pexels.com/photos/1486974/pexels-photo-1486974.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '山谷与薄雾'
  },
  {
    id: 'rec-9',
    url: 'https://images.pexels.com/photos/1001682/pexels-photo-1001682.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '海岸线风景'
  },
  {
    id: 'rec-10',
    url: 'https://images.pexels.com/photos/2437291/pexels-photo-2437291.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '山间湖泊'
  },
  {
    id: 'rec-11',
    url: 'https://images.pexels.com/photos/440731/pexels-photo-440731.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '绿色草地'
  },
  {
    id: 'rec-12',
    url: 'https://images.pexels.com/photos/1032650/pexels-photo-1032650.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '海滩日落'
  }
]);

// 写死的图片数据 - 点赞图片
const likedImages = ref<ImageItem[]>([
  {
    id: 'like-1',
    url: 'https://images.pexels.com/photos/1732414/pexels-photo-1732414.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '现代建筑外观'
  },
  {
    id: 'like-2',
    url: 'https://images.pexels.com/photos/2404046/pexels-photo-2404046.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '城市天际线'
  },
  {
    id: 'like-3',
    url: 'https://images.pexels.com/photos/1769388/pexels-photo-1769388.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '几何建筑设计'
  },
  {
    id: 'like-4',
    url: 'https://images.pexels.com/photos/2079234/pexels-photo-2079234.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '玻璃幕墙建筑'
  },
  {
    id: 'like-5',
    url: 'https://images.pexels.com/photos/2119713/pexels-photo-2119713.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '桥梁建筑'
  },
  {
    id: 'like-6',
    url: 'https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '现代室内设计'
  },
  {
    id: 'like-7',
    url: 'https://images.pexels.com/photos/208745/pexels-photo-208745.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '历史建筑'
  },
  {
    id: 'like-8',
    url: 'https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '城市街道'
  }
]);

// 写死的图片数据 - 收藏图片
const collectedImages = ref<ImageItem[]>([
  {
    id: 'collect-1',
    url: 'https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '团队合作'
  },
  {
    id: 'collect-2',
    url: 'https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '微笑的女士'
  },
  {
    id: 'collect-3',
    url: 'https://images.pexels.com/photos/1681010/pexels-photo-1681010.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '时尚男士'
  },
  {
    id: 'collect-4',
    url: 'https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '人像特写'
  },
  {
    id: 'collect-5',
    url: 'https://images.pexels.com/photos/1656684/pexels-photo-1656684.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '咖啡馆中的人们'
  },
  {
    id: 'collect-6',
    url: 'https://images.pexels.com/photos/2422265/pexels-photo-2422265.jpeg?auto=compress&cs=tinysrgb&w=500&h=500&dpr=1',
    alt: '户外活动'
  }
]);

// 获取当前激活Tab的图片数据
const getActiveTabImages = computed(() => {
  switch (activeTab.value) {
    case 'recommendations':
      return recommendationImages.value;
    case 'likes':
      return likedImages.value;
    case 'collections':
      return collectedImages.value;
    default:
      return [];
  }
});

// 获取当前激活Tab的名称
const getActiveTabName = computed(() => {
  const tab = tabs.find(t => t.id === activeTab.value);
  return tab ? tab.name : '';
});
</script> 